<template>
  <div>
    <div v-for="(item, index) in condition" :key="index" :class="{'mobile-flex':mobile, 'mb10':index !== condition.length -1}" class="flex-center">
      <el-select v-model="item.field" size="small" class="width120 mr10" @change="changeOption($event, item)">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.value"
          :value="item.value" />
      </el-select>
      <el-select v-model="item.condition" size="small" class="width85 mr10" @change="changeCondition($event, item)">
        <el-option
          v-for="item in conditionList"
          :key="item.id"
          :label="item.value"
          :value="item.value" />
      </el-select>
      <el-select v-if="item.valueTypeList.needHttp" v-model="item.value" size="small" class="width120 mr10">
        <el-option
          v-for="item in levelList"
          :key="item.id"
          :label="item.name"
          :value="item.id" />
      </el-select>
      <el-select v-else-if="item.valueTypeList.needValue" v-model="item.value" size="small" class="width120 mr10">
        <el-option
          v-for="item in item.valueTypeList.list"
          :key="item.id"
          :label="item.value"
          :value="item.value" />
      </el-select>
      <el-select v-else v-model="item.value_type" size="small" class="width120 mr10" @change="changeValueType($event, item)">
        <el-option
          v-for="item in item.valueTypeList.list"
          :key="item.id"
          :label="item.value"
          :value="item.value" />
      </el-select>
      <el-input v-if="item.valueTypeList.needInput" v-model="item.value" :maxlength="12" size="small" placeholder="请输入" class="width80 mr10" @input="numInputChange($event, item)">
        <i v-if="item.unit" slot="suffix" style="color:#333">{{ item.unit }}</i>
      </el-input>
      <div v-if="condition.length > 1" class="filter-icon-btn icon-container flex-center">
        <img :src="deleteFilterIcon" class="del-icon" alt="del" @click="handleDelete(index)">
      </div>
    </div>
    <span class="add-text" @click="handleAdd">添加条件 +</span>
  </div>
</template>

<script>
import deleteFilterIcon from '@/assets/reportManage/delete-filter.png';
import ElMessage from '@/utils/message';

export default {
  model: {
    prop: 'condition',
    event: 'changeValue'
  },
  props: {
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    condition: {
      type: Array,
      default() {
        return [{ field: '', condition: '', value_type: '', value: '', valueTypeList: [] }];
      }
    },
    levelList: {
      type: Array,
      default() {
        return [];
      }
    },
    mobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      deleteFilterIcon,
      conditionList: [
        { id: 0, value: '>' },
        { id: 1, value: '>=' },
        { id: 2, value: '=' },
        { id: 3, value: '<=' },
        { id: 4, value: '<' }
      ]
    };
  },
  methods: {
    initData() {
      // 修改预警类型,需要清除选项
      this.condition.splice(1);
      this.$set(this.condition, 0, { field: '', condition: '', value_type: '', value: '', valueTypeList: [] });
    },
    emitEditEvent() {
      this.condition.forEach(item => {
        if (!item.valueTypeList.needHttp && !item.valueTypeList.needValue) {
          // this.changeValueType(item.value_type, item);
          this.changeValueType('', item, item.value_type);
        }
      });
    },
    handleAdd() {
      if (this.condition.length === 20) {
        ElMessage.warning('最多只允许添加20个条件！');
        return;
      }
      this.condition.push({ field: '', condition: '', value_type: '', value: '', valueTypeList: [] });
    },
    handleDelete(index) {
      if (this.condition.length > 1) {
        this.condition.splice(index, 1);
      }
    },
    changeOption(val, item) {
      // 下面两种要删除value_type,否则校验会出错
      if (['客户等级', '核销金额'].includes(val)) {
        delete item.value_type;
      } else {
        item.value_type = '';
      }
      // 获取通知条件选项
      const temp = this.options.filter(item => {
        return item.value === val;
      });
      item.value = '';
      item.valueTypeList = temp[0];
    },
    changeCondition(val, item) {
      if (!item.valueTypeList.needHttp && !item.valueTypeList.needValue) { // 不是客户等级,核销金额 输入框置为true
        item.valueTypeList.needInput = true;
      }
    },
    changeValueType(val, item, value_type = '') {
      if (val) {
        item.value = ''; // 切换选项时，清空后面的输入框
      }
      if (!item.valueTypeList.needHttp && !item.valueTypeList.needValue) { // 不是客户等级,,核销金额 输入框置为true
        item.valueTypeList.needInput = true;
      }
      const unit = item.valueTypeList.list.filter(item => {
        return (item.value === val || item.value === value_type);
      });
      this.$set(item, 'unit', (unit[0] || {}).unit);
    },
    numInputChange(text, item) {
      let str;
      if (typeof item.unit === 'undefined' || item.unit === '天') {
        str = text.replace(/[^\-?\d.]/g, ''); // 数值 允许输入正负数字
      } else {
        str = text.replace(/[^\d.]/g, ''); // 只允许数字
      }
      str = str.replace(/\.{2,}/g, '.'); // 连续两个小数点 replace为.
      str = str.replace(/^\./g, '0.'); // 已点为开头 replace为 0.
      str = str.replace(/^(\d*)\.(\d*)\./g, '$1.$2');// 不连续点点 删掉
      str = str.replace(/^0[^\.]+/g, '0'); // 连续多个0 replace为1个0
      str = str.replace(/^(\-?\d+)\.(\d\d).*$/, '$1.$2'); // 只允许保留小数点后2位
      str = str === '' ? null : str;
      item.value = str;
    }
  }
};
</script>

<style lang="scss" scoped>
.mobile-flex {
  flex-wrap: wrap;
  &::v-deep {
    .el-select {
      margin-bottom: 10px;
    }
  }
}
.width120 {
  width: 120px !important;
  &::v-deep {
    .el-input__inner {
      width: 120px !important;
    }
  }
}
.width80 {
  width: 80px !important;
  &::v-deep {
    .el-input__inner {
      width: 80px !important;
    }
  }
}
.width85 {
  width: 85px !important;
  &::v-deep {
    .el-input__inner {
      width: 85px !important;
    }
  }
}
.mr10 {
  margin-right: 10px;
}
.del-icon {
  width: 14px;
  margin-right: 10px;
  cursor: pointer;
}
.add-text {
  color: #406eff;
  cursor: pointer;
}
.mb10 {
  margin-bottom: 10px;
}
</style>
